<template>
  <el-container>
    <el-header class="titleBar">
      关于我们
    </el-header>

    <el-main class="mainContent">
      <el-card>
        <el-form :model="addForm"
        :rules="addFormRules"
        ref="addFormRef">
          <el-row>
            <el-col :span="12">
              <el-form-item prop="file">
                <p>展示图：</p>
                <el-upload
                  class="avatar-uploader"
                  ref="upload"
                  action=""
                  :show-file-list="false"
                  :multiple="false"
                  :auto-upload="false"
                  :on-change="imgSaveToUrl"
                >
                  <img
                    v-if="this.addForm.img"
                    :src="this.addForm.img"
                    class="avatar"
                  />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-row>
                <el-col>
                  <el-form-item prop="companyName">
                    <p>公司名称：</p>
                    <el-input
                      style="width:280px"
                      placeholder="请输入内容"
                      v-model="addForm.companyName"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col>
                  <el-form-item prop="details">
                    <p>公司简介：</p>
                    <el-input
                      type="textarea"
                      v-model="addForm.details"
                      placeholder="请输入文本"
                      style="width:400px;margin-left:-18px"
                      maxlength="200"
                      show-word-limit
                      :autosize="{ minRows: 5, maxRows: 5 }"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
             <el-col :span="24">
                <el-form-item prop="introduction">
                  <p>公司详情：</p>
                  <quill-editor
                    style="height:150px"
                    v-model="addForm.introduction"
                  >
                  </quill-editor>
                </el-form-item>
              </el-col>
          </el-row>
        </el-form>
        <el-row>
          <el-col :span="12">
            <el-button
              type="info"
              style="width:200px;float:left;margin-top:100px"
              @click="reset"
              >重置</el-button
            >
          </el-col>
          <el-col :span="12">
            <el-button
              type="primary"
              style="width:200px;float:right;margin-top:100px"
              @click="issue"
              >发布</el-button
            >
          </el-col>
        </el-row>
      </el-card>
    </el-main>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      addForm: {
        companyName: "",
        details: "",
        img: "",
        introduction: "",
      },
      addFormRules: {
        companyName: [
          { required: true, message: "请输入公司名", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    handleClick(row) {
      console.log(row);
    },
    //
    async imgSaveToUrl(event) {
      if (this.beforeUploadPicture(event.raw)) {
        var formData = new FormData();
        console.log(formData);
        formData.append("file", event.raw);
        this.http.upload("/about/upload", formData).then((res) => {
          if (status.code !== 200) {
            this.addForm.img = res.data;
            console.log(res.data);
            console.log(this.addForm);
            this.$message.success("上传成功");
          }
        });
      }
    },
    // 图片上传之前
    beforeUploadPicture(file) {
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isLt10M = file.size / 1024 / 1024 < 10;

      if (!isJPG && !isPNG) {
        this.$message.error("上传头像图片只能是 JPG 或者 PNG 格式!");
      }
      if (isJPG && isPNG) {
        if (!isLt10M) {
          this.$message.error("上传头像图片大小不能超过 10MB!");
        }
      }

      return (isJPG || isPNG) && isLt10M;
    },
    async issue() {
      const res = await this.http.post("/about/add", this.addForm);
      console.log(res);
    },
    // resetForm(formName) {
    //     this.$refs[formName].resetFields();
    //   }

    reset() {
      this.$refs.addFormRef.resetFields();
    },
  },
  created() {},
};
</script>

<style scoped>
.header_title {
  font-size: 22px;
  margin-bottom: 0px;
  font-weight: 400;
  color: #999999;
}
.bgk {
  background: pink;
}
.avatar-uploader .el-upload {
  border: 2px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  /* border: 2px dashed #dedede; */
  font-size: 28px;
  color: #8c939d;
  width: 157px;
  height: 157px;
  line-height: 157px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
